<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 
		 事件：用户发起的动作，页面做出的响应
		 事件三要素：
		 1.事件源：触发事件
		 2.事件类型：eg:click单击事件、dbclick双击事件
		 3.事件处理程序：事件触发后要执行的代码，也叫事件函数。
		 
		 -->
		
		 <button onclick="alert('hello world')">点击1</button>
		 <!-- 事件监听：绑定事件（听谁在触发它）
		  方法：
		  1.html属性中提供了on+事件类型
		  eg:<button onclick="alert('hello world')">点击1</button>:耦合性高，代码复用率低
		  2.DOM0绑定事件：对象。属性（on+事件类型）=事件处理函数
		  eg:点击2
		  3.DOM2绑定事件：对象.方法（）
		  时间注册:add
		  -->
		  <button class="ck">点击2</button>
		  
	 <button id="btn">点击3</button>
	</body>
	<script>
		//获取节点
		let list=document.querySelector('.ck');
		//对象.属性=事件处理程序
		list.onclick=function(){
			alert('hello');
			用this.属性访问属性
		}
		list.onclick=null;//移除事件
		console.log('--------------------')
		let btn=document.querySelector('#btn');
		//添加事件监听方法（函数）addEventListener(‘事件类型’、‘事件处理函数’、[true/false]);
		//事件类型不用加前缀on,
		btn.addEventListener('click',test,true);
		btn.removeEventListener('click',test)
		let test=function(){alert('hello')};
	
	</script>
</html>
